<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3.0-双向数据绑定的实现原理</title>
</head>
<body>
    姓名: <span id="spanName"></span>
    <br>
    <input type="text" id="iptName">

    <script>
        //*** vue3.0版本 ***
        /*
            vue.js 是采用数据劫持结合发布者-订阅者模式的方式，
            通过new Proxy()来劫持各个属性的setter，getter，
            在数据变动时发布消息给订阅者，触发相应的监听回调。
        */
        let obj = {};

        obj = new Proxy(obj,{
            get(target,prop){
                return target[prop]
            },
            set(target,prop,value){
                target[prop]=value;
                observer();
            }
        });
        function observer(){
            spanName.innerHTML=obj.name;
            iptName.value=obj.name;
        }
        setTimeout(()=>{
            obj.name="李四";
        },1000);
        // input的监听
        iptName.oninput=function(){
            obj.name=this.value;
        }

    </script>
</body>
</html>